<%--
  Created by IntelliJ IDEA.
  User: Jeck
  Date: 2010-2-9
  Time: 22:20:07
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <title>Diary show</title>
    <script type="text/javaScript" src="${resource(dir:'js/jquery',file:'jquery-1.4.min.js')}"></script>
    <script type="text/javaScript" src="${resource(dir:'js/treeView',file:'jquery.treeview.min.js')}"></script>
    <link rel="stylesheet" href="${resource(dir: 'js/treeView', file: 'jquery.treeview.css')}"/>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#treeview").treeview({
            persist: "location",
            collapsed: true,
            unique: true
        });
    });
    </script>
    <style>
      #body{
        /*position:absolute;*/
        /*left:50%;*/
        /*margin-left:-425px;*/
        background:red;
        width:100%;
        min-height:700px;
      }
      .left{
        background:green;
        width:250px;
        float:left;
        min-height:700px;
        height:600px;
      }
      .right{
        width:100%;
        background: #ffffff;
        min-height:700px;
        height:600px;
        overflow:auto;
      }
    </style>
    <script>
      function showDiary(diaryId){
        var diaryId=diaryId
        $(".right").load("${createLink(action:'show')}/"+diaryId)
      }
    </script>
  </head>
  <body>
     <div id="body">
       <div class="left">
         <g:treeView diaryId="${diaryInstance.id}"></g:treeView>
       </div>
       <div class="right">
         
       </div>
     </div>
  </body>
</html>